<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="assets/css/public.css">
	<script src="js/config.js"></script>
	<script src="js/axios.min.js"></script>
	<title>服务端</title>
</head>
<style>
	.header_box {
		width: 100%;
		height: 64px;
		position: relative;
		top: 0;
		left: 0;
		box-shadow: 0 2px 16px rgba(54, 56, 79, .06);
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* padding: 0 24px; */
		background-color: #fff;
		z-index: 999;
		background-image: linear-gradient(158.2deg, rgb(249 231 166) 26.5%, rgb(254, 254, 254) 86.8%);
	}

	.btn {
		position: absolute;
		right: 40px;
	}

	.sale_btn {
		background-color: #f9d918;
		color: #fff;
		padding: 10px;
		width: 150px;
		border-radius: 10px;
		cursor: pointer;
	}

	.login_btn {
		background-color: #1770e0;
		color: #fff;
		padding: 10px;
		width: 100px;
		border-radius: 10px;
		cursor: pointer;
	}

	.left_box {
		width: 200px;
		height: 674px;
		text-align: center;
		box-shadow: 0 2px 16px rgba(54, 56, 79, .06);
	}

	#tourist {
		height: 70px;
		font-size: 18px;
		font-weight: bold;
		line-height: 70px;
		background: #789de0;
		margin-top: 10px;
		cursor: pointer;
	}

	#exhibition {
		height: 70px;
		font-size: 18px;
		font-weight: bold;
		line-height: 70px;
		background: #789de0;
		margin-top: 10px;
		cursor: pointer;
	}

	.content_box {
		margin: 10px 0 0 20px;
	}

	#exhibition_cont {
		margin-top: 30px;
	}

	.tickerInfo,.orderInfo {
		margin-bottom: 10px;
		width: 1655px;
		box-shadow: 0 2px 16px rgba(54, 56, 79, .06);
	}

	.title {
		padding: 10px;
		background-image: linear-gradient(181.2deg, rgb(249 222 181) 10.5%, rgb(254, 254, 254) 86.8%);
		font-weight: bold;
	}

	.info {
        width: 100%;
		margin: 10px 0 10px 10px;
		height: 40px;

	}

    .dateInput {
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 8px;
        font-size: 16px;
    }

    .submitButton {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }
</style>

<body>
	<div class="header_box">
		<div class="btn">
            <button class="sale_btn" onclick="backupDatabase()">数据备份</button>
            <button class="sale_btn" onclick="restoreDatabase()">数据恢复</button>
            <button class="sale_btn" onclick="saleClick()">查询售票数据</button>
			<button class="sale_btn" onclick="yyeClick()">查询营业数据</button>
			<button class="login_btn" onclick="nologin()">退出登录</button>
		</div>
	</div>
	<div style="display: flex;">
		<div class="left_box">
			<div id="tourist" onclick="changeTourist()">游客信息</div>
			<div id="exhibition" onclick="changExhibition()">展览管理</div>
		</div>
		<div class="content_box">
			<div id="tourist_cont"></div>
			<div id="addex"></div>
			<div id="exhibition_cont"></div>
		</div>
		<!-- 编辑 弹框 -->
		<dialog id="editTicketdialog" style="position: relative;top: 150px;left: 304px;">
			<div class="ticketEdit" id="selectInfo" ></div>
			<button id="btn-close_one" style="margin: 10px 0 0 685px;">确定</button>
		</dialog>
		<!-- 新增弹框 -->
		<dialog id="addTicketdialog" style="position: relative;top: 150px;left: 304px;">
			<div class="ticketadd" id="addInfo"></div>
			<button id="btn-close_add" style="margin: 10px 0 0 685px;">确定</button>
		</dialog>
	</div>
	<script type="text/javascript">
		var userinfo;
		window.onload = function () {
			userinfo = window.localStorage.getItem('userinfo');
			userinfo = userinfo ? JSON.parse(userinfo) : null;
			console.log(userinfo)
			// getType();
			changExhibition();
		}

        function backupDatabase() {
            axios.post(URL + `/database/backup`, {
                name
            }).then(result => {
                let res = result.data;
                if (res.code == 100) {
                    alert(res.data)
                }
            })

        }


        function restoreDatabase() {
            axios.post(URL + `/database/restore`, {
                name
            }).then(result => {
                let res = result.data;
                if (res.code == 100) {
                    alert(res.data)
                }
            })
            // 一秒后再执行
            setTimeout("window.location.reload()", 1000 )

        }

		function changeTourist() {
			// window.location.reload()
			document.getElementById("add_zhanlan").style.display = "none"; //隐藏
			var div = document.getElementById("tourist");
			div.style.backgroundColor = "#eccc70"; // 更改背景颜色
			var div1 = document.getElementById("exhibition");
			div1.style.backgroundColor = "#789de0"; // 更改背景颜色
			document.getElementById("exhibition_cont").style.display = "none"; //隐藏
			document.getElementById("tourist_cont").style.display = ""; //显
			// document.getElementById("addInfo").innerHTML ="";
			// document.querySelector("#addInfo").remove();
			let html = ''
			let container = document.getElementById("tourist_cont");

			let name = userinfo.account
			axios.post(URL + `/user/selectAll`, {
				name
			}).then(result => {
				let res = result.data;
				if (res.code == 100) {
					res.data.forEach((item,index) => {
						html += `
						<div class="tickerInfo">
							<div class="title">游客信息详情${index+1}</div>
							<div class="info">
								<span>用户名：${item.account}</span>
								<span>姓名：${item.name}</span>
								<span style="margin-left:10px">密码：${item.password}</span>
								<span style="margin-left:10px">电话号码：${item.phoneNum == null ? '暂无':item.phoneNum}</span>
							</div>
						</div>
					`
					})
					container.innerHTML = html;
				}
			})

		}

		function changExhibition() {
			let containerAdd = document.getElementById("addex");
			var div = document.getElementById("tourist");
			div.style.backgroundColor = "#789de0"; // 更改背景颜色
			var div = document.getElementById("exhibition");
			div.style.backgroundColor = "#eccc70"; // 更改背景颜色

			document.getElementById("tourist_cont").style.display = "none"; //隐藏
			document.getElementById("exhibition_cont").style.display = ""; //显

			let add = `<button class="login_btn" id="add_zhanlan" onclick="addTicket()">新增</button>`
			containerAdd.innerHTML = add;
			let html = ''
			let container = document.getElementById("exhibition_cont");
			let newList = [];

			let name = userinfo.account
			// 展览管理接口
			axios.post(URL + `/show/selectAllShow2`, {
				name
			}).then(result => {
				let res = result.data;
				if (res.code == 100) {
					res.data.forEach((item,index) => {

						html += `
	
			<div class="tickerInfo">
				<div class="title">票务详情${index+1}</div>
				<div class="info">
					<span>票名：${item.name}</span>
					<span style="margin-left:10px">内容：${item.content}</span>
					<span style="margin-left:10px">余量：${item.ticketNum}</span>
					<span style="margin-left:10px">进场时间：${item.showTime}</span>
					<span style="margin-left:10px">价格：${item.price}</span>
					<button style="position: absolute;right: 110px;" onclick="isDeleted('${item.id}')">${item.isDeleted === 0 ? '启用':'废弃'}</button>
					<button style="position: absolute;right: 50px;" 
					onclick="editTicket('${item.id}','${item.name}','${item.content}','${item.ticketNum}','${item.showTime}','${item.price}')">编辑</button>
				</div>
			</div>
		`
					})
					container.innerHTML = html;
				}
			}).catch(err => {})
		}

        // 查询售票数据窗口
        function selectTicket() {
            // window.location.reload()
            document.getElementById("add_zhanlan").style.display = "none"; //隐藏
            var div = document.getElementById("tourist");
            div.style.backgroundColor = "#eccc70"; // 更改背景颜色
            var div1 = document.getElementById("exhibition");
            div1.style.backgroundColor = "#789de0"; // 更改背景颜色
            document.getElementById("exhibition_cont").style.display = "none"; //隐藏
            document.getElementById("tourist_cont").style.display = ""; //显
            // document.getElementById("addInfo").innerHTML ="";
            // document.querySelector("#addInfo").remove();
            let contentHtml = ''
            let container = document.getElementById("tourist_cont");

            contentHtml += `<div class="tickerInfo">
				<div class="title">票务详情${index+1}</div>
				<div class="info">
					<span>票名：${item.name}</span>
					<span style="margin-left:10px">内容：${item.content}</span>
					<span style="margin-left:10px">余量：${item.ticketNum}</span>
					<span style="margin-left:10px">进场时间：${item.showTime}</span>
					<span style="margin-left:10px">价格：${item.price}</span>
					<button style="position: absolute;right: 50px;"
					onclick="editTicket('${item.id}','${item.name}','${item.content}','${item.ticketNum}','${item.showTime}','${item.price}')">编辑</button>

				</div>
			</div>`

            container.innerHTML = contentHtml;
        }


		function addTicket() {
			let containers = document.getElementById("addInfo");
			document.getElementById("addInfo").innerHTML = null
			document.querySelector("#addTicketdialog").showModal()
			let btnOpen = document.querySelector("#btn-open");
			let btnClose = document.querySelector("#btn-close_add");
			let dialog = document.querySelector("#addTicketdialog");
			let contentHtml = ''
			
			// newData.forEach(item => {
			contentHtml = `
				<div class="tickerInfo" style="width:1420px !important">
					<div class="title">新增
					</div>
					<div>
						<span>票名：</span>
						<input id="ticketNameAdd"  placeholder="请输入票名"/>
						<span>内容：</span>
						<input id="ticketContentAdd" placeholder="请输入内容"/>
						<span>余量：</span>
						<input id="ticketNumAdd"  placeholder="请输入余量"/>
						<span>进场时间：</span>
						<input id="ticketshowTimeAdd"  placeholder="请输入进场时间"/>
						<span>价格：</span>
						<input id="ticketPriceAdd"  placeholder="请输入价格"/>
					</div>
				</div>	
				`
			// })
			containers.innerHTML = contentHtml;

			
			
			//关闭
			btnClose.addEventListener("click", function () {
				dialog.close();
				let parma = {
				name: document.getElementById('ticketNameAdd').value,
				content: document.getElementById('ticketContentAdd').value,
				ticketNum: document.getElementById('ticketNumAdd').value,
				showTime: document.getElementById('ticketshowTimeAdd').value,
				price: document.getElementById('ticketPriceAdd').value,
			}
			console.log("parmmmm",parma)
				// 展览管理编辑接口
				axios.post(URL + `/show/addShow`, parma).then(result => {
					let res = result.data;
					if (res.code == 100) {
						alert("新增成功！")
						
						window.location.reload()
					}
				}).catch(err => {})
			});
		}

        function isDeleted(showId) {
            // 设置为废弃票
            axios.post(URL + `/show/deleteByShowId` +"?showId="+showId).then(result => {
                let res = result.data;
                alert(res.data)
                window.location.reload()
            }).catch(err => {})
        }

		function editTicket(showId, name, content, ticketNum, showTime, price) {
			console.log(showId, ">>>>>>>>>>")
			document.querySelector("#editTicketdialog").showModal()
			let btnOpen = document.querySelector("#btn-open");
			let btnClose = document.querySelector("#btn-close_one");
			let dialog = document.querySelector("#editTicketdialog");
			let contentHtml = ''
			let containers = document.getElementById("selectInfo");
			// newData.forEach(item => {
			contentHtml = `
				<div class="tickerInfo" style="width:1420px !important">
					<div class="title">订单详情${showId}
					</div>
					<div>
						<span>票名：</span>
						<input id="ticketName" value="${name}" disabled placeholder="请输入票名"/>
						<span>内容：</span>
						<input id="ticketContent" value="${content}" placeholder="请输入内容"/>
						<span>余量：</span>
						<input id="ticketNum" value="${ticketNum}" placeholder="请输入余量"/>
						<span>进场时间：</span>
						<input id="ticketshowTime" value="${showTime}" placeholder="请输入进场时间"/>
						<span>价格：</span>
						<input id="ticketPrice" value="${price}" placeholder="请输入价格"/>
					</div>
				</div>	
				`
			// })
			containers.innerHTML = contentHtml;

			
			//关闭
			btnClose.addEventListener("click", function () {
				dialog.close();
				let parma = {
				id: showId,
				name: document.getElementById('ticketName').value,
				content: document.getElementById('ticketContent').value,
				ticketNum: document.getElementById('ticketNum').value,
				showTime: document.getElementById('ticketshowTime').value,
				price: document.getElementById('ticketPrice').value,
			}
				// 展览管理编辑接口
				axios.post(URL + `/show/editShow`, parma).then(result => {
					let res = result.data;
					if (res.code == 100) {
						alert("编辑成功！")
						// window.location.reload();
						window.location.reload()
					}
				}).catch(err => {})
			});
		}

		function saleClick() {
            document.getElementById("add_zhanlan").style.display = "none"; //隐藏
            var div = document.getElementById("tourist");
            div.style.backgroundColor = "#eccc70"; // 更改背景颜色
            var div1 = document.getElementById("exhibition");
            div1.style.backgroundColor = "#789de0"; // 更改背景颜色
            document.getElementById("exhibition_cont").style.display = "none"; //隐藏
            document.getElementById("tourist_cont").style.display = ""; //显
            let html = ''
            let container = document.getElementById("tourist_cont");

            html += `
			<div class="tickerInfo">
				<div class="title">订单详情</div>
				<div class="info">
                    <form id="dateRangeForm">
                        <label for="startDate">开始日期:</label>
                        <input type="date" id="beginTime" name="beginTime">

                        <label for="endDate">结束日期:</label>
                        <input type="date" id="endTime" name="endTime">
                    </form>
                    <button onclick="queryTicketByDate()">查询</button>
				</div>
				<div id="OrderInfoDetail"></div>
			</div>
		`
            container.innerHTML = html;
		}


        function queryTicketByDate() {
            var beginTime = document.getElementById('beginTime').value;
            var endTime = document.getElementById('endTime').value;
            let html = '';
            let container = document.getElementById("OrderInfoDetail");
            // 发送查询请求
            axios.post(URL + `/order/queryTicketByDate`, {
                beginTime: beginTime,
                endTime: endTime
            }).then(result => {
                let res = result.data;
                if (res.code == 100) {
                    res.data.forEach((item, index) => {
                        html += `
                    <div class="orderInfo">
                        <div class="title">售票信息${index + 1}</div>
                        <div class="info">
                            <span style="margin-left:10px">购买人：${item.buyUser}</span>
                            <span style="margin-left:10px">使用人：${item.useUser}</span>
                            <span style="margin-left:10px">演出名：${item.showName}</span>
                            <span style="margin-left:10px">进场时间：${item.showTime}</span>
                            <span style="margin-left:10px">手机号：${item.phone}</span>
                            <span style="margin-left:10px">身份证号：${item.identity}</span>
                            <span style="margin-left:10px">购买时间：${item.createTime}</span>
                            <span style="margin-left:10px">购买数量：${item.buyNum}张</span>
                            <span style="margin-left:10px">订单总价：${item.sumPrice} 元</span>
                        </div>
                    </div>
                `;
                    });
                    container.innerHTML = html;
                }
            });
        }


        function yyeClick() {
            document.getElementById("add_zhanlan").style.display = "none"; //隐藏
            var div = document.getElementById("tourist");
            div.style.backgroundColor = "#eccc70"; // 更改背景颜色
            var div1 = document.getElementById("exhibition");
            div1.style.backgroundColor = "#789de0"; // 更改背景颜色
            document.getElementById("exhibition_cont").style.display = "none"; //隐藏
            document.getElementById("tourist_cont").style.display = ""; //显
            let html = ''
            let container = document.getElementById("tourist_cont");

            html += `
			<div class="tickerInfo">
				<div class="title">营业额详情</div>
				<div class="info">
                    <form id="dateRangeForm">
                        <label for="startDate">开始日期:</label>
                        <input type="date" id="beginTime" name="beginTime">

                        <label for="endDate">结束日期:</label>
                        <input type="date" id="endTime" name="endTime">
                    </form>
                    <button onclick="queryTurnoverByDate()">查询</button>
				</div>
				<div id="OrderInfoDetail"></div>
			</div>
		`
            container.innerHTML = html;
		}

        function queryTurnoverByDate() {
            var beginTime = document.getElementById('beginTime').value;
            var endTime = document.getElementById('endTime').value;
            let html = '';
            let container = document.getElementById("OrderInfoDetail");
            // 发送查询请求
            axios.post(URL + `/order/queryTurnoverByDate`, {
                beginTime: beginTime,
                endTime: endTime
            }).then(result => {
                let res = result.data;
                if (res.code == 100) {
                    html += `<div style="width:100%;text-align: center; font-size: 30px;">所选时间段总营业额为：${res.data.sumTurnover}</div>`;
                    container.innerHTML = html;
                }
            });
        }

		function nologin() {
			window.localStorage.removeItem('userinfo');
			window.open('/login', '_self');
		}
	</script>
</body>

</html>